<script setup>
import xdb from "./xdb.vue";
import bzlx from "./bzlx.vue";
import { onMounted, getCurrentInstance, reactive, ref } from "vue";
let { proxy } = getCurrentInstance();
let arr = ref([]);
let arr1 = ref([]);
onMounted(async () => {
  let re = await proxy.$axios("/bzlx");
  console.log(re.data,);
  arr1.value = re.data;
});

onMounted(async () => {
  let re = await proxy.$axios("/zuire");
  // console.log(re.data);
  arr.value = re.data;
});
async function fn1() {
  let re = await proxy.$axios("/zuire");
  // console.log(re.data);
  arr.value = re.data;
}
async function fn2() {
  let re = await proxy.$axios("/huayu");
  // console.log(re.data);
  arr.value = re.data;
}
async function fn3() {
  let re = await proxy.$axios("/oumei");
  console.log(re.data);
  arr.value = re.data;
  // console.log(arr);
}
async function fn4() {
  let re = await proxy.$axios("/rihan");
  // console.log(re.data);
  arr.value = re.data;
}
async function fn5() {
  let re = await proxy.$axios("/danqu");
  // console.log(re.data);
  arr.value = re.data;
}
async function fn6() {
  let re = await proxy.$axios("/sszk");
  // console.log(re.data);
  arr1.value = re.data;
  p2size.value = "17px";
  p2color.value = "#222222";
  p1size = ref("14px");
  p1color = ref("#999");
}
async function fn7() {
  let re = await proxy.$axios("/bzlx");
  // console.log(re.data);
  arr1.value = re.data;
  p1size.value = "17px";
  p1color.value = "#222222";
  p2size = ref("14px");
  p2color = ref("#999");
}
// function fn(){
//     console.log(arr)
// }
// 设置css字体样式
let p1size = ref("17px");
let p1color = ref("#222222");
let p2size = ref("14px");
let p2color = ref("#999");
</script>

<template>
  <div>
    <!-- <div class="top-nav">
        <div class="left">
            <ul>
                <li><a href="">豆瓣</a></li>
                <li><a href="">读书</a></li>
                <li><a href="">电影</a></li>
                <li><a href="">音乐</a></li>
                <li><a href="">同城</a></li>
                <li><a href="">小组</a></li>
                <li><a href="">阅读</a></li>
                <li><a href="">FM</a></li>
                <li><a href="">时间</a></li>
                <li><a href="">豆品</a></li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li><a href="">下载豆瓣客户端</a></li>
                <li><a href="">提醒</a></li>
                <li><a href="">登录</a></li>
            </ul>
        </div>
    </div>
    <div class="top-nav-music"></div> -->
    <div class="dp-content">
      <div class="dp-content-left">
        <div class="dp-content-left-lb"></div>
        <div class="dp-content-left-head">
          <p class="p1" @click="fn7">本周流行音乐人</p>
          <p class="p2" @click="fn6">上升最快音乐人</p>
        </div>
        <div class="dp-content-left-artists">
          <bzlx v-for="el in arr1" :key="el.oid" :obj1="el"></bzlx>
        </div>
        <div class="dp-content-left-head1">
          <span>新碟榜</span>
          <ul>
            <li @click="fn1"><a>最热</a></li>
            <li @click="fn2"><a>华语</a></li>
            <li @click="fn3"><a>欧美</a></li>
            <li @click="fn4"><a>日韩</a></li>
            <li @click="fn5"><a>单曲</a></li>
          </ul>
        </div>
        <div class="dp-content-left-content">
          <xdb v-for="el in arr" :key="el.gid" :obj="el"></xdb>
          <!-- <button @click="fn">取值</button> -->
        </div>
        <div class="dp-content-left-head2">
          <span>近期热门歌单</span>
          <ul>
            <li @click="fn1"><a>最热</a></li>
            <li @click="fn2"><a>流行</a></li>
            <li @click="fn3"><a>摇滚</a></li>
            <li @click="fn4"><a>民谣</a></li>
            <li @click="fn5"><a>原声</a></li>
          </ul>
        </div>
        <div class="dp-content-left-footer">
          <div class="ftbox one">
            <img src="../views/img/f1.jpg" />
            <span class="name">给李真真的歌单</span>
            <span class="span5">收藏()</span>
            <span class="span1">1.New Soul</span><br />
            <span class="span2">2.End Of May</span><br />
            <span class="span3">3.Bustin' Surfboards</span>
            <span class="span4">...</span>

          </div>
          <div class="ftbox">
            <img src="../views/img/f2.jpg" />
            <span class="name">浪漫主义</span>
            <span class="span5">收藏()</span>

            <span class="span1">1.Ce Frumoasa E Iubirea</span><br />
            <span class="span2">2.La Isla Bonita Glee Cast Ve</span><br />
            <span class="span3">3.Dina</span>
            <span class="span4">...</span>

          </div>
          <div class="ftbox">
            <img src="../views/img/f3.jpg" />
            <span class="name">杨树脸的调子</span>
            <span class="span5">收藏()</span>

            <span class="span1">1.New Soul</span><br />
            <span class="span2">2.End Of May</span><br />
            <span class="span3">3.Bustin' Surfboards</span>
            <span class="span4">...</span>

          </div>
          <div class="ftbox">
            <img src="../views/img/f4.jpg" />
            <span class="name">摇</span>
            <span class="span5">收藏()</span>

            <span class="span1">1.New Soul</span><br />
            <span class="span2">2.End Of May</span><br />
            <span class="span3">3.Bustin' Surfboards</span>
            <span class="span4">...</span>

          </div>
          <div class="ftbox">
            <img src="../views/img/f5.jpg" />
            <span class="name">静</span>
            <span class="span5">收藏()</span>

            <span class="span1">1.New Soul</span><br />
            <span class="span2">2.End Of May</span><br />
            <span class="span3">3.Bustin' Surfboards</span>
            <span class="span4">...</span>

          </div>
          <div class="ftbox">
            <img src="../views/img/f6.jpg" />
            <span class="name">星空下的荒野</span>
            <span class="span5">收藏()</span>

            <span class="span1">1.New Soul</span><br />
            <span class="span2">2.End Of May</span><br />
            <span class="span3">3.Bustin' Surfboards</span>
            <span class="span4">...</span>
          </div>
        </div>
      </div>
      <div class="dp-content-right">
        <div class="dp-content-right-gg"></div>
        <div class="lxbox">
          <div>
          <p>47410</p>
          <span>音乐人</span>
          </div>

          <div>
          <p>2725</p>
          <span>播客</span>
          </div>

          <div>
          <p>1236</p>
          <span>厂牌</span>
          </div>

        </div>
        <div class="wyjr">
          <p>我要加入</p>
        </div>
        <div class="rmyyfl">
          <span>热门音乐人分类</span>
        </div>
        <div class="flbox">
          <ul>
            <li><a href="">流行</a></li>
            <li><a href="">轻音乐</a></li>
            <li><a href="">摇滚</a></li>
            <li><a href="">古典</a></li>
            <li><a href="">电子</a></li>
            <li><a href="">世界音乐</a></li>
            <li><a href="">民谣</a></li>
            <li><a href="">说唱</a></li>
            <li><a href="">爵士</a></li>
            <li><a href="">原声</a></li>

          </ul>
        </div>
        <div class="dp-content-right-gg2"></div>
        <div class="dp-content-right-gg3">
          <img src="../views/img/gg3.jpg" alt="">
          <p>Weknow音乐人小程序</p>
          <span>发现当下最酷的独立音乐</span>
        </div>
        <div class="dp-content-right-gg4"></div>
        <div class="xzwk">
          <img src="../views/img/gg5.png" alt="" class="img1">
          <img src="../views/img/weknow.png" alt="" class="img2">
          <p class="p1">下载Weknow客户端</p>
          <p class="p2">加入我们吧</p>
        </div>

       
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.top-nav {
  width: 100%;
  height: 28px;
  background-color: #545652;
  display: flex;
  .left {
    width: 70%;
    ul {
      display: flex;
      list-style: none;
      li {
        width: 48px;
        height: 28px;
        line-height: 28px;
        display: flex;
        justify-content: center;
      }
    }
  }
  a {
    color: #d5d5d5;
    font-size: 12px;
    text-decoration: none;
  }
  .right {
    width: 30%;
    ul {
      display: flex;
      list-style: none;
    }
  }
}
.top-nav-music {
  width: 100%;
  height: 115px;
  background-color: #f0f3ef;
}
.dp-content {
  width: 1040px;
  height: 2397px;
  margin: auto;
//   background-color: antiquewhite;
  margin-top: 50px;
  display: flex;
  .dp-content-left {
    width: 675px;
    height: 1980px;
    // background-color: dodgerblue;
    .dp-content-left-lb {
      width: 675px;
      height: 250px;
      background-image: url("../views/img/lunbo.jpg");
      background-size: cover;
    }
    .dp-content-left-head {
      width: 675px;
      height: 33.5px;
      margin-top: 35px;
    //   background-color: brown;
      display: flex;
      //  justify-content: center;
      align-items: center;
      border-bottom: 2px solid #02a682;

      p {
        cursor: pointer;
        width: 120px;
        padding: 3px;
        height: 12px;
        line-height: 12px;
      }
      .p1 {
        color: v-bind(p1color);
        font-size: v-bind(p1size);
        border-right: 2px solid #545652;
      }
      .p2 {
        color: v-bind(p2color);
        font-size: v-bind(p2size);
      }
    }
    .dp-content-left-head1 {
      width: 675px;
      height: 33.5px;
      margin-top: 35px;
      //  background-color: brown;
      border-bottom: 2px solid #02a682;
      display: flex;
      align-items: center;
      span {
        font-size: 17px;
        margin-right: 15px;
      }
      ul {
        list-style: none;
        display: flex;
        li {
          width: 26px;
          height: 15px;
          line-height: 15px;
          text-align: center;
          padding: 0px 5px;
          border-right: 2px solid #545652;
          display: flex;
        }
        a {
          color: #999;
          font-size: 13px;
          text-decoration: none;
          cursor: pointer;
        }
      }
    }
    .dp-content-left-head2 {
      width: 675px;
      height: 33.5px;
      margin-top: 35px;
      //  background-color: brown;
      border-bottom: 2px solid #02a682;
      display: flex;
      align-items: center;
      span {
        font-size: 17px;
        margin-right: 15px;
      }
      ul {
        list-style: none;
        display: flex;
        li {
          width: 26px;
          height: 15px;
          line-height: 15px;
          text-align: center;
          padding: 0px 5px;
          border-right: 2px solid #545652;
          display: flex;
        }
        a {
          color: #999;
          font-size: 13px;
          text-decoration: none;
          cursor: pointer;
        }
      }
    }
    .dp-content-left-artists {
      width: 675px;
      height: 432px;
      background-color: #F5F7F8;
      display: flex;
      flex-wrap: wrap;
    }
    .dp-content-left-content {
      display: flex;
      flex-wrap: wrap;
      //  justify-content: space-around;
      width: 675px;
      height: 439px;
      //  background-color: coral;
    }
    .dp-content-left-footer {
      width: 675px;
      height: 560px;
      background-color: #F5F7F8;

    //   background-color: darkmagenta;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding-top: 18px;
      .ftbox {
        width: 300px;
        height: 157.5px;
        background-color: #FFFFFF;
        position: relative;
        padding-left: 15px;
        padding-top: 15px;
        img {
          width: 41px;
          height: 41px;
          
        }
        .name{
          position: absolute;
          left: 65px;
          top:15px;
          color:black;
          font-size: 16px;
        }
        span{
          position: absolute;
          left: 65px;
          top:30px;
          color:#666666;
          font-size: 14px;
          
        }
        .span1{
            top:70px
        }
         .span2{
            top:90px
        }
         .span3{
            top:110px
        }
         .span4{
            top:130px
        }
          .span5{
            top:40px
        }
      }
    }
  }


  .dp-content-right {
    width: 300px;
    height: 2397px;
    // background-color: blueviolet;
    margin-left: 65px;
    .dp-content-right-gg {
      width: 300px;
      height: 250px;
      background-color: magenta;
      background-image: url("../views/img/gg.png");
    }
    .dp-content-right-gg2 {
      width: 300px;
      height: 250px;
      // background-color: magenta;
      background-image: url("../views/img/gg2.png");
      margin-top: 30px;
    }
      .dp-content-right-gg3 {
      width: 300px;
      height: 250px;
      // background-color: magenta;
      margin-top: 30px;
      img{
        width: 200px;
        height: 200px;
        margin-left: 50px;
      }
      p{
        width: 170px;
        height: 25px;
        color: #111111;
        font-size: 16px;
        margin:  auto;
      }
      span{
        // display: inline-block;
        width: 143px;
        height: 21px;
        color: #4e4e4e;
        font-size: 13px;
        text-align: center;
        margin-left: 75px;
        margin-top: -5px;
      }
    }
    .dp-content-right-gg4 {
      width: 300px;
      height: 250px;
      background-color: magenta;
      background-image: url("../views/img/gg4.png");
      margin-top: 30px;
    }
    .xzwk{
      width: 300px;
      margin-top: 20px;
      .img1{
        width: 200px;
        height: 200px;
        margin-left: 50px;
      }
      .img2{
        width: 150px;
        height: 40px;
        margin-left: 75px;
      }
      .p1{
        width: 170px;
        margin: auto;
        font-size: 16px;
      }
      .p2{
        width: 100px;
        margin: auto;
      }
    }
    .lxbox{
      width: 300px;
      height: 57px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      div{
        width: 98px;
        height: 57px;
        text-align: center;
        background-color: #F5F7F8;
        p{
          color: #138A64;
          font-size: 17px;
          font-weight:900;
          margin: 4px;
        }
        span{
          color: #666666;
          font-size: 15px;
        }
      }
    }
    .wyjr{
      width: 300px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #139D72;
      margin-bottom: 20px;
      p{
      color: #FFFFFF;
      font-size: 17px;
      }
    }
    .flbox{
      width: 300px;
      display: flex;
      ul{
        list-style: none;
        display: flex;
        flex-wrap: wrap;

        li{
          width: 140px;
          height: 36px;
          display: flex;
          // justify-content: center;
          padding-left: 5px;
          align-items: center;
          border: 0.5px solid #d5d5d5;
          // background-color: #FFFFFF;
          a{
            text-decoration: none;
            color: #138A64;
          }
        }
      }
    }
  }
}
</style>
